import React, { Component } from 'react'
import { StatusBar, BackHandler,WebView,TouchableOpacity,ActivityIndicator,Image,View,Text,ScrollView} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'
import { connect } from 'react-redux'

import CommodityDetailActions from '../Redux/CommodityDetailRedux'
import AppConfig from '../Config/AppConfig'
const domain = AppConfig.domain

// Styles
import styles from './Styles/CommodityDetailScreenStyle'

class CommodityDetailScreen extends Component {
  static navigationOptions = {
    title: '项目详情'
  }
  constructor(props) {
    super(props)
    const { state } = this.props.navigation
    this.state = {
      id: state.params.id
    }
    this.props.getCommodity(state.params.id, this.props.city.adcode)
  }
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }
  render () {
    const { navigate } = this.props.navigation
    //if (this.props.commodity.fetching) {
    //  return <ActivityIndicator style={{marginTop:20}} />
    //}
    //if (!this.props.commodity.payload) {
    //  return null
    //}
    //const commodity = this.props.commodity.payload
    //const removed = (
    //    <ScrollView>
    //      <Image
    //        style={{width: '100%',height: 260}}
    //        source={{uri:commodity.img}}/>
    //      <View style={styles.section}>
    //        <View style={styles.header}>
    //          <Text style={styles.title}>{commodity.name}</Text>
    //          <Text style={styles.price}>{commodity.price}元</Text>
    //        </View>
    //        <Text>销量:120  时长:{commodity.clock}</Text>
    //        <Text>[四星服务] [夜间专享]</Text>
    //        <View style={styles.subSection}>
    //          <Text style={styles.subTitle}>您是否有以下不适:</Text>
    //          <Text>1.头晕</Text>
    //          <Text>2.恶心</Text>
    //        </View>
    //        <View style={styles.subSection}>
    //          <Text style={styles.subTitle}>常见问题:</Text>
    //        </View>
    //        <View style={styles.subSection}>
    //          <Text style={styles.subTitle}>服务流程:</Text>
    //          <ScrollView horizontal>
    //            <View style={{marginRight:10}}>
    //              <Image
    //                source={{uri:commodity.img}}
    //                style={{width:160,height:120}} />
    //              <Text>奶浴泡脚(5分钟)</Text>
    //            </View>
    //            <View style={{marginRight:10}}>
    //              <Image
    //                source={{uri:commodity.img}}
    //                style={{width:160,height:120}} />
    //              <Text>奶浴泡脚(5分钟)</Text>
    //            </View>
    //            <View style={{marginRight:10}}>
    //              <Image
    //                source={{uri:commodity.img}}
    //                style={{width:160,height:120}} />
    //              <Text>奶浴泡脚(5分钟)</Text>
    //            </View>
    //            <View style={{marginRight:10}}>
    //              <Image
    //                source={{uri:commodity.img}}
    //                style={{width:160,height:120}} />
    //              <Text>奶浴泡脚(5分钟)</Text>
    //            </View>
    //          </ScrollView>
    //        </View>
    //        <View style={styles.subSection}>
    //          <Text style={styles.subTitle}>功效症状:</Text>
    //        </View>
    //        <View style={styles.subSection}>
    //          <Text style={styles.subTitle}>禁忌症状:</Text>
    //          <Text>1.感冒</Text>
    //        </View>
    //        <View style={styles.subSection}>
    //          <Text style={styles.subTitle}>下单须知:</Text>
    //          <Text>1.请填写正确的地址</Text>
    //          <Text>1.请填写正确的手机号码</Text>
    //        </View>
    //      </View>
    //    </ScrollView>
    //)
    return (
      <View style={styles.container}>
        <StatusBar translucent={false} barStyle='dark-content' backgroundColor='white' />
        <WebView
          style={{flex:1}}
          source={{uri:domain+'/api/project/detailproject?id='+this.state.id}}>
        </WebView>
        {this.props.commodity.payload &&
        <TouchableOpacity
          onPress={()=>navigate('CallScreen',{id:this.state.id})}
          style={{paddingVertical:15,backgroundColor:'#27AE60',alignItems:'center'}}>
          <Text style={{color:'white',fontSize:18}}>叫 服 务</Text>
        </TouchableOpacity>}
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    city: state.city.payload,
    commodity: state.commodityDetail,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getCommodity: (id, adcode) => dispatch(CommodityDetailActions.commodityDetailRequest(id, adcode))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CommodityDetailScreen)
